import { Button, Space, Toast, Form, DotLoading, Modal, Input, Radio, Checkbox, Cascader } from "antd-mobile";
import { appNavigate, appTypeCheck, checkENV, checkENV2, isMobile } from "@/utils";
import requewt from "@/utils/requewt";
import { API, MINI_P_PATH, PHONE_REG, REDIRECT_TITLE, REDIRECT_WX_COVER, REDIRECT_WX_URL } from "@/config";
import { useEffect, useReducer, useRef, useState } from "react";
import callFeedback from "@/components/common/modalFeedback";
import { KvHeaderComp, KvContentComp, KvBrandComp, RuleComp } from "@/components/common";
import Router, { useRouter } from "next/router";
import { signIn, signOut } from "next-auth/react";
import { useCookies } from "react-cookie";
import * as gtag from '@/libs/gtag'
import useRecord from "@/components/pages/stores/useRecord";
import useApp from "@/stores/useApp";
import { RightOutline } from "antd-mobile-icons";
import { useBurialPoint } from "@/components/hooks";
import cityOptions from '@/utils/locations'

const pageName = "home";
const klassName = pageName.replace(/\./g, '-');

const LANDING_URL = `/landing`;
const TEST_TOKEN = `WnNOMjFRUWR3c2xjc2Z1VndoR0R4dGtBVHN5SStoRHhQM3g0dzVmUmRjeWRhQWdhMmhqZzhkNXRNVWYrNWlTZS9RMCt0UnV4NkdRcTFTU1dUUTdxMWc9PQ--___1709801985748___264504___2982696681___WECHAT`

const ENV_MAP = {
  mini: {
    title: `小程序`,
    key: `mini`
  },
  app: {
    title: `APP`,
    key: `app`
  },
  test: {
    title: `测试`,
    key: `test`
  }
}

export default function Page(props) {
  const [env, setENV] = useState(undefined);
  const {push,query} = useRouter()
  const { pageRecord,submitDrive} = useBurialPoint()
  const [showAddr,setShowAddr] = useState(false)

  useEffect(() => {
    if (!isMobile()) {
      callFeedback({
        
        title: '提示',
        content: '请在移动端浏览器打开',
        hideClose: true,
        closeOnAction: false,
    closeOnMaskClick: false,
    actions: []
      })
      return
    }
    form.setFieldsValue({
      car: '极狐阿尔法S5',
    })
    const urlSearchParams = new URLSearchParams(location.search)
    pageRecord({
      source: urlSearchParams.get('source') || 'test',
      category: 'home_page'
    })
  },[])
  const [form] = Form.useForm()
  const makeAnAppiontment = () => {
    // push('/landing')
    console.log('/////')
    const params = form.getFieldsValue()

    if (!params.phone || !PHONE_REG.test(params.phone)) {
      callFeedback({
        hideClose:true,
        title: '手机号码错误',
        content: <div style={{color:'#fff'}}>
          （请填写正确的手机号）
        </div>
      })
    } else {
      if (!form.getFieldValue('city')) {
        return Toast.show('请选择试驾城市')
      }
      if (!form.getFieldValue('protocol')) return Toast.show('请同意协议并继续')
      submitDrive({...params,...query}).then((resp) => {
        console.log(resp)
        push('/landing',{query})
      })
      
      // callFeedback({
      //   hideClose:true,
      //   title: '重复提交',
      //   content: <div style={{color:'#fff'}}>
      //     (您已成功提交，请于七日内避免重复操作，以确保数据准确。感谢您的配合。)
      //   </div>
      // })
    }
  }
  const showRule = () => {
    callFeedback({
      hideClose:true,
      title: '用户协议',
      content: <div>
        <RuleComp />
      </div>
    })
  }
  return (
    <>
      <div className={`p-${klassName} page page-start`}>
        <div className="inner">
          <KvBrandComp />

          <div className="position-center">

            <div className="kv-footer text-center" style={{ color: `#fff`,position:'absolute',width:'100vw' }}>
              <Form layout='horizontal' form={form}>
                <Form.Item label="预约车型" name="car">
                  <Input
                    value="极狐阿尔法S5"
                    readOnly
                  />
                </Form.Item>
                <Form.Item name='city' label="试驾城市" onClick={()=>{
                    console.log('xxxx')
                    setShowAddr(true)
                  }}>
                  <Input
                  placeholder="请选择试驾城市"
                  readOnly
                  
                  />
                </Form.Item>
                <Form.Item name="phone" label="联系电话">
                  <Input
                    placeholder="请输入手机号码"
                  />
                </Form.Item>
                <Form.Item className="protocol" name={'protocol'}>
                  <Checkbox>
                    我已经仔细阅读并同意<span onClick={showRule} style={{fontSize:'0.6rem'}}>
                  《留资活动隐私声明》
                  </span>
                  </Checkbox>
                  
                </Form.Item>
                <Form.Item className="submit-btn">
                  <Button className="act-btn" block onClick={makeAnAppiontment}>
                    预约试驾
                  </Button>
                </Form.Item>
              </Form>
              <Cascader 
              style={{background:'#fff',color:'#000'}}
                options={cityOptions}
                visible={showAddr}
                onCancel={()=>setShowAddr(false)}
                onSelect={(value) => {
                  console.log('select',value)
                }}
                onConfirm={(value) => {
                  if (value.length) {
                    // if (['北京市','天津市','重庆市','上海市'])
                    if (value.some(i => ['北京市','天津市','重庆市','上海市'].includes(i))&&value.length===1) {
                      form.setFieldValue('city',value.join(''))
                    } else {
                      if (value.length<2) {
                        return Toast.show('请选择市级')
                      }
                      form.setFieldValue('city',value.join(''))
                    }
                  }
                  
                  setShowAddr(false)
                }}
              />
            </div>
          </div>
        </div>
      </div>

    </>

  )
}


Page.need2auth = false;
Page.pageName = pageName;